import { useEffect, useState } from 'react'
import st from './contentItem.module.css'
// mainItem中的小组件
const ContentItem = ({ config, xNum, row }: any) => {
    // 异步数据
    if (config.length !== 0) {
        return config.map((item: any, idx: number) => <NumberItem xNum={xNum} key={idx} item={item} />)
    } else {
        // loading占位
        return <div className={row === 1 ? st.loading1 : st.loading2}>
            <div className={st.round}></div>
        </div>
    }
}

// 动态数字
const NumberItem = ({ xNum, item }: any) => {
    const { value } = item
    const [showNum, setShowNum] = useState(0)
    useEffect(() => {
        // 数字累加
        if (showNum >= value) {
            setShowNum(value)
            return;
        }
        const ids = requestAnimationFrame(() => {
            // 步长
            const step = Math.ceil(value / 20)
            setShowNum((prev) => {
                // 判断加上这步后是否超过value，超过则采用value
                const next = prev + step
                return next >= value ? value : next
            })
        })
        // 清理副作用
        return () => {
            cancelAnimationFrame(ids)
        }
    }, [value, showNum])
    return (<div
        className={st.innerItem}
        style={{ width: `${Math.floor((1 / xNum) * 95)}vw` }}>
        <div className={st.amount}>{showNum}</div>
        <div className={st.name}>{item.text}</div>
    </div>)
}


export default ContentItem